<template class=menuData>
    <el-dialog :title="isAdd ? '新增部门' : '修改部门'" :visible.sync="dialogFormVisible" @close="onClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="部门名称"></el-input>
            </el-form-item>
            <el-form-item label="上级部门" prop="parentId">
                <el-cascader v-model="ruleForm.parentId" :options="options" :props="props"></el-cascader>
            </el-form-item>
            <el-form-item label="排序号">
                <el-input-number v-model="ruleForm.sort" controls-position="right" :min="0"
                    :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item style="text-align:right">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm()">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { deptAPI } from '@/http'
export default {
    name: 'rmenuData-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'menuData-page',
            ruleForm: {},
            dialogFormVisible: false,
            rules: {
                name: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' },
                ],
            },
            isAdd: true,
            isHandler: false,
            props: {
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'subDepts',
                emitPath: false,
            },
            options: [],
        }
    },
    created() {
        this.getMenu()
    },
    methods: {
        getMenu() {
            deptAPI.getList().then(res => {
                // console.log('所有部门：', res);
                if (res.code === 200) {
                    this.options = res.data
                }
            })
        },
        onClose() {
            this.$emit('close', this.isHandler)
        },
        open(id) {
            if (id) {
                this.isAdd = false;
                deptAPI.getDateInfo(id).then(res => {
                    if (res.code === 200) {
                        console.log('shuju', res.data);
                        this.ruleForm = res.data
                    }
                })
            }
            this.dialogFormVisible = true;
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.ruleForm)
                    console.log('awegfaefa', params);
                    let ParamAPI = this.isAdd ? 'createFn' : 'upDataAPI'
                    deptAPI[ParamAPI](params).then(res => {
                        if (res.code === 200) {
                            this.dialogFormVisible = false;
                            this.isHandler = true;
                            this.$message({
                                message: (this.isAdd ? '新增' : '修改') + '成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false;
                }
            });
        },
    }

}
</script>

<style scoped lang="less"></style>